<template>
  <div>
   <div class="navbar">
      <div ref="navbars" class="navbarstatic"><nav-bar></nav-bar></div>
      <div ref="navbarm" class="navbarmove"><nav-bar :title="singer"></nav-bar></div>
    </div>
    <scroll :data="songList" @scroll="itemScroll">
    <div class="scroll" ref="scroll">
    <div class="bg-image" :style="{backgroundImage: 'url(' + singer.avatar + ')'}">
      <div class="singer">
        {{singer.name}}
     </div>
    </div>
    <loading v-show="!songList.length"></loading>
    <section ref="scrollTop">
     <a class="detailNode" v-for="(song, index) in songList" :key="song.index">
       <div>
         <span>{{index+1}}</span>
         <div class="userInfoTwo">
           <div @click="_thisSongClick(song, index)" style="width: 6.5rem;">
             <h2>{{song.name}}</h2>
             <p>{{song.singer+' - '+song.album}}</p>
           </div>
           <!-- <img class="playBtn " src="../common/imgs/1306816.png">
           <img class="more "  src="../common/imgs/1343352.png"> -->
         </div>
       </div>
     </a>
     </section>
     </div>
     </scroll>
  </div>
</template>

<script>
import loading from './Loading'
import NavBar from './NavBar'
import scroll from './scroll'
export default{
  name: 'DiscList',
  props: {
    songList: {
      type: Array
    },
    singer: {
      type: Object
    }
  },
  components: {
    loading,
    NavBar,
    scroll
  },
  methods: {
    _thisSongClick (item, index) {
      this.$emit('select', item, index)
    },
    itemScroll(pos) {
      if (pos.y < -250) {
        this.$refs.navbars.style.display = 'none'
        this.$refs.navbarm.style.display = 'block'
      } else {
        this.$refs.navbars.style.display = 'block'
        this.$refs.navbarm.style.display = 'none'
      }
    }
  }
}
</script>

<style scoped>
  .scroll{
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  .detailNode {
    position: relative;
    display: block;
    color: #999;
    font-size: 0;
}
.detailNode span{
    display: inline-block;
    width: 10%;
    vertical-align: middle;
    text-align: center;
    font-size: .6rem;
}
.userInfoTwo {
    position: relative;
    display: inline-block;
    width: 90%;
    border-bottom: 1px solid #eee;
    padding: .3rem 0;
    vertical-align: middle;
}
.userInfoTwo h2 {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: inline-block;
    width: 6.5rem;
    color: #030303;
    font-size: .45rem;
}
.userInfoTwo p {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: inline-block;
    width: 6.5rem;
    color: #999;
    margin-top: .2rem;
    font-size: .35rem;
}
.detailNode .playBtn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: .7rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}
.userInfoTwo .more {
    position: absolute;
    right: 0;
    top: 50%;
    width: .06rem;
    padding: .6rem;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
  .bg-image{
    height: 9.5rem;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
  }
  .singer{
    color: white;
    font-size: .7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 9.5rem;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
  }
  .navbarmove{
    display: none;
  }
  .navbarstatic{
    display: block;
  }
  .navbarstatic >>> .van-nav-bar{
    background-color: inherit!important;
    color: white!important;
  }
 .navbarstatic >>> .van-nav-bar__text{
   color: white!important;
 }
  .navbarstatic >>> .van-nav-bar::after {
    border-bottom-width: 0px!important;
  }
  .navbarstatic >>> .van-nav-bar .van-icon{
    color: white!important;
  }
 .navbarstatic >>> .movement li span {
    background: radial-gradient(transparent 0%, #ebedf0 100%);
}
  >>>.loading {
    height: 9rem;
    line-height: 8rem;
  }
</style>
